<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #000;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '24px serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Helper function to draw a resistor ---
        function drawResistor(x, y, width, height) {
            const zigzags = 6;
            const zagHeight = width / 2;
            const segmentLength = height / (zigzags + 2);

            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x, y + segmentLength);
            for (let i = 0; i < zigzags; i++) {
                const currentY = y + segmentLength * (i + 1);
                const nextX = x + (i % 2 === 0 ? 1 : -1) * zagHeight;
                ctx.lineTo(nextX, currentY + segmentLength / 2);
            }
            ctx.lineTo(x, y + height - segmentLength);
            ctx.lineTo(x, y + height);
            ctx.stroke();
        }

        // --- Main Drawing ---

        // Coordinates
        const x_left = 80;
        const x_mid = 250;
        const x_right = 420;
        const y_top = 50;
        const y_bot = 350;

        // --- Left Branch (Battery and Switch) ---
        // Battery
        const batt_y_center = 120;
        const batt_h = 40;
        const batt_w_long = 30;
        const batt_w_short = 15;
        ctx.beginPath();
        ctx.moveTo(x_left, y_top);
        ctx.lineTo(x_left, batt_y_center - batt_h / 2); // Wire to battery
        ctx.moveTo(x_left - batt_w_long, batt_y_center - batt_h / 2);
        ctx.lineTo(x_left + batt_w_long, batt_y_center - batt_h / 2); // Positive plate
        ctx.moveTo(x_left - batt_w_short, batt_y_center + batt_h / 2);
        ctx.lineTo(x_left + batt_w_short, batt_y_center + batt_h / 2); // Negative plate
        ctx.stroke();
        ctx.fillText('ξ', x_left - 50, batt_y_center);
        
        // Switch
        const switch_y_top = 260;
        const switch_y_bot = 300;
        ctx.beginPath();
        ctx.moveTo(x_left, batt_y_center + batt_h / 2);
        ctx.lineTo(x_left, switch_y_top); // Wire to switch
        ctx.moveTo(x_left, switch_y_bot);
        ctx.lineTo(x_left, y_bot); // Wire from switch
        
        // Open switch drawing
        ctx.moveTo(x_left, switch_y_top);
        ctx.lineTo(x_left + 40, switch_y_bot - 30);
        ctx.stroke();
        // Terminals
        ctx.beginPath();
        ctx.arc(x_left, switch_y_top, 4, 0, 2 * Math.PI);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(x_left, switch_y_bot, 4, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('S', x_left + 30, (switch_y_top + switch_y_bot) / 2 - 20);

        // --- Middle Branch (Resistor and Solenoid) ---
        // Top wire
        ctx.beginPath();
        ctx.moveTo(x_mid, y_top);
        ctx.lineTo(x_mid, 90);
        ctx.stroke();
        // Resistor
        drawResistor(x_mid, 90, 20, 60);
        ctx.fillText('R', x_mid - 30, 120);
        // Wire to solenoid area
        ctx.beginPath();
        ctx.moveTo(x_mid, 150);
        ctx.lineTo(x_mid, 180);
        ctx.stroke();
        // Solenoid
        const sol_y_center = 230;
        const sol_radius = 45;
        ctx.beginPath();
        ctx.arc(x_mid, sol_y_center, sol_radius, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.fillText('solenoid', x_mid, sol_y_center + sol_radius + 20);
        // Magnetic field lines (X)
        const x_size = 8;
        ctx.font = 'bold 20px sans-serif';
        ctx.fillText('X', x_mid, sol_y_center + 15);
        ctx.fillText('X', x_mid - 20, sol_y_center - 5);
        ctx.fillText('X', x_mid + 20, sol_y_center - 5);
        ctx.fillText('X', x_mid, sol_y_center - 20);
        ctx.font = '24px serif'; // Reset font
        // Bottom wire
        ctx.beginPath();
        ctx.moveTo(x_mid, sol_y_center + sol_radius);
        ctx.lineTo(x_mid, y_bot);
        ctx.stroke();


        // --- Right Branch (Two Resistors) ---
        // Top wire
        ctx.beginPath();
        ctx.moveTo(x_right, y_top);
        ctx.lineTo(x_right, 90);
        ctx.stroke();
        // Top Resistor
        drawResistor(x_right, 90, 20, 60);
        ctx.fillText('R', x_right + 30, 120);
        // Middle wire
        ctx.beginPath();
        ctx.moveTo(x_right, 150);
        ctx.lineTo(x_right, 210);
        ctx.stroke();
        // Bottom Resistor
        drawResistor(x_right, 210, 20, 60);
        ctx.fillText('R', x_right + 30, 240);
        // Bottom wire
        ctx.beginPath();
        ctx.moveTo(x_right, 270);
        ctx.lineTo(x_right, y_bot);
        ctx.stroke();

        // --- Top and Bottom Wires ---
        ctx.beginPath();
        ctx.moveTo(x_left, y_top);
        ctx.lineTo(x_right, y_top);
        ctx.moveTo(x_left, y_bot);
        ctx.lineTo(x_right, y_bot);
        ctx.stroke();

    </script>
</body>
</html>